<template>
  <div class="login_box">
    <div class="login_cloth" @click="close"></div>
    <div class="login_form">
      <div class="login_form_in">
        <div class="title flex-box">
          <div class="flex">{{ word_str.title }}</div>
          <div class="close" @click="close">x</div>
        </div>
        <input class="input input-lg" v-model="username" placeholder="用户名/手机号" type="text">
        <input class="input input-lg" v-model="password" placeholder="登录密码" type="password">
        <input class="input input-lg" v-show="is_reg" v-model="password2" placeholder="重复密码" type="password">
        <button class="btn btn-fill btn-block btn-lg" @click="login">{{ word_str.btn }}</button>
        <div class="login_other flex-box">
          <div class="lost_passowrd">忘记密码</div>
          <div class="reg" @click="is_reg = !is_reg">{{ word_str.reg_str }}</div>
        </div>
      </div>
    </div>
    <Tips ref="tips"></Tips>
  </div>
</template>

<script>
import Tips from "@/components/common/Tips.vue";

export default {
  data() {
    return {
      username: '',
      password: '',
      password2: '',
      is_reg: false,
      login_str: {
        title: '登录',
        btn: '马上登录',
        reg_str: '注册账号',
      },
      reg_str: {
        title: '注册',
        btn: '马上注册',
        reg_str: '已有账号? 返回登录',
      },
    };
  },
  name: "login",
  components: {
    Tips
  },
  computed: {
    word_str() {
      if (this.is_reg) {
        return this.reg_str;
      }
      return this.login_str;
    }
  },
  methods: {
    login() {
      let data = {
        username: this.username,
        password: this.password,
      };
      if (this.is_reg) {
        data.password2 = this.password2;
        this.$axios.post("/api/index/login/register", data).then(res => {
          console.log(res.data);
        });
      } else {
        this.$axios.post("/api/index/login/login", data).then(res => {
          console.log(res.data);
          if (!res.data.err) {
            this.$store.commit('loginShow');
            this.$store.dispatch('getUserinfo');
          }
          this.$refs.tips.show(res.data.msg);
        });
      }
    },
    close() {
      this.$store.commit('loginShow');
    }
  },
  created() {}
};
</script>

<style scoped lang="less">

.transition {
  transition: all 0.2s ease;
}
.login_box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
}
.login_cloth {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.login_form {
  position: relative;
  margin: auto;
  .login_form_in {
    width: 14rem;
    background: #FFFFFF;
    border-radius: .25rem;
    padding: 0.5rem 1rem;
    .title {
      font-size: 1rem;
      font-weight: 700;
      color: #666;
      line-height: 1.8rem;
      .close {
        font-size: .75rem;
        // line-height: 1rem;
        // width: 1rem;
        // text-align: center;
      }
    }
  }
  .login_other {
    color: #aaa;
    margin: 0.25rem 0;
    justify-content:space-between;
    >div {
      padding: 0.25rem 0;
    }
  }
}
.logo {
  display: block;
  margin: auto;
}
.login_box {
  .input,
  .btn {
    margin: 0.25rem 0;
  }
}
</style>